<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>聊天室</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

</head>

<body>
日志内容：
<br/>
<textarea id="text_chat_content" readonly="readonly" cols="300" rows="9">

</textarea>

<br/>

<!--用户：<input id="in_user_name" value=""/>-->
<button id="btn_join">打开log</button>
<button id="btn_exit">关闭log</button>

<br/>

<script type="text/javascript">
    $(document).ready(function () {

        var url = 'ws://127.0.0.1:8080/tail-log-1';

        var ws = null;

        $('#btn_join').click(function () {

            ws = new WebSocket(url);

            ws.onmessage = function (event) {
                //服务端发送的消息
                $('#text_chat_content').append(event.data + '\n');
            }

            ws.onclose = function (event) {
                $('#text_chat_content').append('ws close');
            }

        });

        //离开聊天室
        $('#btn_exit').click(function () {

            if (ws) {
                ws.close();
            }

        });

    })
</script>

</body>

</html>